<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-favor"></i> schart图表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <!-- <div class="plugins-tips">
        vue-schart：vue.js封装sChart.js的图表组件。
        访问地址：<a href="https://github.com/lin-xin/vue-schart"
           target="_blank">vue-schart</a>
      </div> -->
      <div class="schart-box">
        <div class="schart-box">
          <div class="content-title">折线图</div>
          <schart class="schart"
                  canvasId="line"
                  :data="data1"
                  type="line"
                  :options="options"></schart>
        </div>
      </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';
export default {
  name: 'basecharts',
  components: {
    Schart
  },
  data: () => ({
    data1: [
      { name: '2012', value: 1141 },
      { name: '2013', value: 1499 },
      { name: '2014', value: 2260 },
      { name: '2015', value: 1170 },
      { name: '2016', value: 970 },
      { name: '2017', value: 1450 }
    ],
    options: {
      title: '某商店近年营业总额',
      bgColor: '#D5E4EB',
      titleColor: '#00887C',
      fillColor: 'red',
      contentColor: 'rgba(46,199,201,0.3)'
    }
  })
}
</script>

<style scoped>
.schart-box {
  display: inline-block;
  margin: 20px;
}
.schart {
  width: 500px;
  height: 400px;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
</style>